import { useState } from 'react';
import { Breadcrumb, Layout, Popconfirm, message } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import Main from '@/components/MainMenu'

const { Header, Content, Footer, Sider } = Layout;

const View: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const username = localStorage.getItem('token')
  const navigate = useNavigate()

  const confirm = (_e: React.MouseEvent<HTMLElement, MouseEvent> | undefined) => {
    localStorage.removeItem('token')
    navigate('/login')
    message.success('退出登录成功！');
  }

  const goOfficial = () => navigate('/official')


  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Main />
      </Sider>
      {/* 右边主体 */}
      <Layout>
        {/* 头部 */}
        <Header style={{ paddingLeft: 20 }}>
          <Breadcrumb style={{ margin: '16px 0' }} items={[
            {
              title: 'User',
            }, {
              title: <a href="" onClick={goOfficial}>官网首页</a>,
            }, {
              title: <a href="">{username}</a>,
            }, {
              title:
                <Popconfirm title="退出登录" description="确认退出登录吗？" onConfirm={confirm} okText="Yes" cancelText="No" >
                  <a>退出登录</a>
                </Popconfirm>,
            }
          ]}>
          </Breadcrumb>
        </Header>

        {/* 内容 */}
        <Content style={{ margin: '16px 16px 0 16px', padding: 8, minHeight: 360 }}>
          <Outlet />
        </Content>

        {/* 底部 */}
        <Footer style={{ textAlign: 'center', padding: '17px 50px' }}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default View;